<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ彩贝导航</title>
<!--    未实现动画效果……-->
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        #all {
            /*border: #01db04 2px solid;*/
        }

        #head {
            height: 100px;
            /*border: #08AEEA solid 1px;*/
            background: #f5f5f5;
        }
        #d1{
            float: left;
        }
        #d1 a:nth-of-type(1) img {
            margin: 10px 0 0 260px;
        }
        #d1 a:nth-of-type(2) img {
            margin: 10px 0 0 170px;
        }
        #d1 a:nth-of-type(1) img:hover {
            animation: first 0.3s linear both;

        }
        #d1 a:nth-of-type(2) img:hover {
            animation: second 0.3s linear both;

        }
        @keyframes first
        {
            from {background-image: url("images/header_03.png")}
            to {background-image: url("images/header_05.png")}
        }
        @keyframes second
        {
            from {background-image: url("images/header_07.png")}
            to {background-image: url("images/header_09.png")}
        }


        #menu:before {
            display: block;
            height: 0;
            content: '';
            clear: both;
        }
        #headPic {
            margin: 35px 0 0 80px;
        }

        #menu {
            position: relative;
            left: 200px;

        }

        #menu li {
            list-style: none;
            float: left;
            margin-left: 15px;

        }

        #menu li:nth-of-type(odd):hover {
            text-decoration: underline;
            cursor: pointer;

        }

        #pic {
            float: right;
            margin-right: 150px;
        }

        #pic a img:hover {
            transform: rotate(360deg) scale(1.5);
            transition: all 2s ease 0.5s;
        }

        #all:after {
            display: block;
            height: 0;
            content: '';
            clear: both;
        }
    </style>
</head>
<body>
<div id="all">

    <div id="head">
        <img id="headPic" src="images/logo_170x46.png">
    </div>
    <div id="d1">
        <a HREF="#"><img src="images/header_03.png"></a>
        <a HREF="#"><img src="images/header_07.png"></a>
    </div>
    <ul id="menu" >
        <li>返回商场</li>
        <li>丨</li>
        <li>商旅频道</li>
        <li>丨</li>
        <li>积分商城</li>
        <li>丨</li>
        <li>商旅频道</li>
        <li>丨</li>
        <li>了解彩贝</li>
        <li>丨</li>
        <li>彩贝活动</li>
        <li>丨</li>
        <li>个人中心</li>
    </ul>
    <div id="pic">
        <a HREF="#"><img src="images/iconsB_11.gif"></a>
        <a HREF="#"><img src="images/iconsB_12.gif"></a>
        <a HREF="#"><img src="images/iconsB_13.png"></a>
    </div>
</div>

</body>
</html>